<template>
  <div class="ht-100">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-2 wd-75 center" style="color: white">搜索</div>
      </template>
    </HeaderTop>
    <section class="ht-100" style="background-color: #f7f8fa">
      <van-row class="back-white py-1">
        <van-col span="20">
          <van-search
            v-model="foodValue"
            placeholder="请输入商家或美食名称"
            input-align="center"
            @clear="clearValue"
            maxlength="10"
          />
        </van-col>
        <van-col span="4">
          <div class="py-3 mr-3">
            <van-button type="primary" block size="small" @click="search(foodValue)"
              >提交</van-button
            >
          </div>
        </van-col>
      </van-row>
      <section v-if="liShiIsShow">
        <h3 class="mx-2 my-4 fs-4 text-2">搜索历史</h3>
        <van-cell v-for="(item, index) in foodSearchList" :key="index">
          <template #value>
            <van-icon @click="removeHistoryItem(item)" name="cross" />
          </template>
          <template #title>
            <span class="text-3" @click="handleClickHistory(item)"> {{ item }}</span>
          </template>
        </van-cell>
        <div
          class="back-white d-flex flex-center px-4 py-5 m-clear-btn"
          v-show="foodSearchList.length"
          @click="clearSearchHistory"
        >
          <span class="fs-2 text-2">清空历史</span>
        </div>
      </section>
      <section v-if="searched">
        <h3 class="mx-2 my-4 fs-6 text-3">
          <van-icon name="shop-o" color="" size="15" /> <span class="block mx-1">搜索商家</span>
        </h3>
        <div v-if="Array.isArray(shopList) && shopList.length" class="back-white">
          <van-row v-for="item in shopList" :key="item.id" class="py-4 px-2 m-show-box back-white">
            <van-col span="5"
              ><van-image
                class="d-inline-block"
                width="1.7rem"
                height="1.7rem"
                fit="cover"
                :src="imgBaseUrl + item.image_path"
            /></van-col>
            <van-col span="11"
              ><div class="mb-4">
                <span class="m-pin-tag fs-7 d-inline-block" style="transform: translateY(-0.09rem)"
                  >品牌</span
                >
                <span class="text-1 fs-4 d-inline-block mx-2 imp-text text-ellipsis wd-75">{{
                  item.name
                }}</span>
              </div>
              <div class="mb-4">
                <van-rate
                  v-model="item.rating"
                  readonly
                  allow-half
                  size="8px"
                  color="#fd9b12"
                  gutter="1px"
                /><span class="fs-7 text-3 d-inline-block ml-1" style="color: #fd9b12">{{
                  item.rating
                }}</span>
                <span class="fs-10 d-inline-block mx-2">月售{{ item.recent_order_num }}单</span>
              </div>
              <div>
                <span class="text-2 d-inline-block fs-8"
                  >￥{{ item.float_minimum_order_amount }}起送</span
                >
                <span class="fs-6">&nbsp;/&nbsp;</span>
                <span class="text-2 d-inline-block fs-8">{{ item.piecewise_agent_fee.tips }}</span>
              </div></van-col
            >
            <van-col span="8">
              <div class="d-flex flex-end" style="flex-direction: column">
                <ul class="pb-2">
                  <li
                    class="m-support-tag d-inline-block fs-9 mr-1 text-3"
                    v-for="value in item.supports"
                  >
                    {{ value.icon_name }}
                  </li>
                </ul>
                <div class="py-2">
                  <span
                    v-if="item?.delivery_mode"
                    class="d-inline-block fs-10 m-tag"
                    :style="`background-color:#${item.delivery_mode.color}`"
                    >{{ item.delivery_mode.text }}</span
                  >
                  <span
                    class="d-inline-block fs-10 m-tag mx-1"
                    v-if="item.zhunTagIsShow"
                    style="color: #57a9ff"
                    >准时达</span
                  >
                </div>
                <div class="py-2 mx-1">
                  <span class="fs-8 text-3">{{ item.distance }}</span>
                  <span class="fs-7 text-3">&nbsp;/&nbsp;</span>
                  <span class="fs-8 main-color">{{ item.order_lead_time }}</span>
                </div>
              </div>
            </van-col>
          </van-row>
        </div>
        <div v-else="!Array.isArray(shopList) || !shopList.length" class="back-white">
          <van-empty description="找不到对应的商家"></van-empty>
        </div>
      </section>
    </section>

    <TabBar></TabBar>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { ShopList_format } from "@/type/index";
import { useRouter } from "vue-router";
import { searchShop } from "@/api";
import { Notify } from "vant";
import { constPinia } from "@/store/index";
import { imgBaseUrl } from "dir/env.config";
import { storeToRefs } from "pinia";
const router = useRouter();
const store = constPinia();
const { foodSearchList, geohash } = storeToRefs(store);
const foodValue = ref<string | number>("");
const shopList = ref<ShopList_format>(null);
//搜索历史是否展示
const liShiIsShow = computed(() => {
  return !searched.value && !foodValue.value;
});
//是否搜索完成
const searched = ref<boolean>(false);
const getFoodShop = async () => {
  let res = await searchShop<ShopList_format>({
    geohash: geohash.value,
    keyword: foodValue.value,
  });
  if (Array.isArray(res)) {
    res.forEach(item => {
      if (Array.isArray(item.supports) && item.supports.length) {
        item.zhunTagIsShow = item.supports.some(item => {
          return item.icon_name == "准";
        });
      }
    });
  }
  shopList.value = res;
  searched.value = true;
};
//搜索框的内容被删除,搜索未完成,展示搜索历史
const clearValue = () => {
  searched.value = false;
};
//搜索商品
const search = (value: number | string) => {
  if (!value) {
    Notify({ type: "warning", message: "输入内容不能为空" });
  } else {
    store.setSearchFoodHistory(value);
    console.log(value);
    getFoodShop();
  }
};

//点击搜索历史并查找
const handleClickHistory = (value: string | number) => {
  foodValue.value = value;
  search(value);
};
//清除当个搜索历史
const removeHistoryItem = item => {
  store.clearSearchFoodHistory("single", item);
};
//清除所有历史
const clearSearchHistory = () => {
  foodSearchList.value = [];
};
</script>

<style lang="scss" scoped>
.m-clear-btn {
  border: 0.01rem #d4d7de solid;
}
$text-3: #909399;

$Lighter: #ebeef5;

.m-show-box {
  border-bottom: 0.01rem $Lighter solid;
}
.m-shop-item-box {
  height: 2rem;
}
.m-tag {
  border: 0.01rem #57a9ff solid;
  color: white;
  border-radius: 0.02rem;
  transform: scale(0.9);
  padding: 0.02rem;
}
.m-support-tag {
  border: 0.01rem $text-3 solid;
  border-radius: 0.02rem;
  padding: 0.02rem;
}
.m-pin-tag {
  background-color: #fad850;
  color: #413827;
  padding: 0.03rem 0.05rem;
  font-weight: 600;
  border-radius: 20%;
}
</style>
